<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/style.css" />
		<style>
			#scroll{position: fixed;left: 0;}
			.ctn{
				padding-bottom: 0 !important;
				background-color: #1D1D1D;
			}
			.mui-bar-nav {
			    top: 0;
			    -webkit-box-shadow: none;
			     box-shadow: none; 
			}
			.priceType{
			    width: 3rem;
			    background-color: #171717;
			    border: 1px solid #FFC938 !important;
			    margin-right: 10px;
			    font-size: 0.4rem;
			    margin-bottom: 0;
			}
			.mui-scroll-wrapper{background-color: #171717;}
			#searchRes ul li img{display: block;width:0.82rem;height:0.5rem}
			.contTitle{position: fixed;left: 0;top:0;width: 100%;z-index: 2;height: 0.5rem;}
			.mui-content{background-color: #171717;}
			.contInner{margin-top:1.3rem;}
			#day_list ul li{height:1.3rem;}
			#day_lists{box-sizing: border-box;padding-bottom: 60px;}
			.stoke_total ul{border-bottom:0.26rem solid #1d1d1d; margin-bottom: 0;padding-bottom: 0.13rem;height: 3.2rem;}
			.numBoxS{
			    position: relative;
			    display: inline-block;
			    overflow: hidden;
			    width: 50%;
			    height: 35px;
			    margin-right: 10px;
			    padding: 0 40px;
			    vertical-align: top;
			    vertical-align: middle;
			    border: solid 1px #bbb;
			    border-radius: 3px;
			    background-color: #efeff4;
			}
			.mui-btn.delBtnS {    
				font-size: 18px;
			    font-weight: 400;
			    line-height: 100%;
			    position: absolute;
			    top: 0;
			    overflow: hidden;
			    width: 40px;
			    height: 100%;
			    padding: 0;
			    color: #555;
			    border: none;
			    border-radius: 0;
			    background-color: #f9f9f9;
			    left: 0;
			    border-top-left-radius: 3px;
			    border-bottom-left-radius: 3px;
			}
			.mui-btn.addBtnS{
				font-size: 18px;
			    font-weight: 400;
			    line-height: 100%;
			    position: absolute;
			    top: 0;
			    overflow: hidden;
			    width: 40px;
			    height: 100%;
			    padding: 0;
			    color: #555;
			    border: none;
			    border-radius: 0;
			    background-color: #f9f9f9;
			    right: 0;
			    border-top-right-radius: 3px;
			    border-bottom-right-radius: 3px;
			}
			#numAddDel .numInner,#bt2 .priceInner{
				display: inline-block;
			    overflow: hidden;
			    width: 100%!important;
			    height: 100%;
			    margin: 0;
			    padding: 0 3px!important;
			    text-align: center;
			    text-overflow: ellipsis;
			    word-break: normal;
			    border: none!important;
			    border-right: solid 1px #ccc!important;
			    border-left: solid 1px #ccc!important;
			    border-radius: 0!important;
			}
			#priceNum ul{ box-sizing: border-box;padding-bottom: 10px;border-bottom: 1px solid #1d1d1d;}
		</style>
	</head>
	<body class="optionalPage ctn">
		<!--navBar-->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">交易</h1>
		</header>
		<!--contInner-->
		<div class="contInner">
			<div class="sale mui-content part ctn">
				<div class="mui-row  stoke_total">
					<ul>
						<li class="mui-col-sm-6 mui-col-xs-6" style="text-align: center;">
							<div class="mui-col-sm-12 mui-col-xs-12">
								<input id='stoke_num' type="text" class=" mui-input mui-pull-right" placeholder="股票代码">
							</div>
							<span id="p1"></span><br />
							<span id="p2"></span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="p3"></span>
						</li>
						<li class="mui-col-sm-6 mui-col-xs-6">
							<div class="mui-col-sm-12 mui-col-xs-12">
								<span>涨停价:</span>	<span id="hi"></span>
							</div>
							<div class="mui-col-sm-12 mui-col-xs-12">
								<span>跌停价:</span>	<span id="lo"></span>
							</div>
						</li>
					</ul>
				</div>
				<div id="scroll" class="mui-scroll-wrapper" style="top: 3.4rem; bottom:5rem;display:none;">  
					<div id="searchRes" class="mui-scroll scroll"></div>  
				</div> 
				<div class="mui-row  floor_two" id='priceNum'>
					<ul>
						<li class="mui-pull-left">
							<span>可用金额(<i class="codeType">hkd</i>)</span>:<span class='personFee'>0</span>
						</li>
						<li class="mui-pull-right">
							<select class="priceType">
								<option value="1">限价</option>
								<option value="0">市价</option>
							</select>
							<!--<span id="price">现价</span>-->
						</li>
					</ul>
					<ul id="bt2" >
						<li class="mui-pull-left mui-col-sm-4 mui-col-xs-4">
							<span>价格</span>
						</li>
						<li class="mui-pull-right mui-col-sm-8 mui-col-xs-8  nus  numBoxS nubox " >
							<button class="mui-btn mui-btn-warnin delBtnS bt1" type="button">-</button>
							  	<input id="mony" class="priceInner" type="number" readonly="readonly" value=""/>
							  <!-- "+"按钮，点击可增大当前数值 -->
							  <button class="mui-btn addBtnS bt1" type="button">+</button>
							  <p class="priceMin" style="display: none;">0</p>
						</li>
					</ul>
					<p class="mui-text-right" style="box-sizing: border-box;padding-right: 0.3rem;"><span class="codeType">hkd</span>:<span class="kuNum">0</span></p>
					<ul id="numAddDel">
						<li class="mui-pull-left mui-col-sm-4 mui-col-xs-4">
							<span>数量</span>
						</li>
						<li class="mui-pull-right mui-col-sm-8 mui-col-xs-8  nus  numBoxS nubox " >
							<button class="mui-btn mui-btn-warnin delBtnS bt1" type="button">-</button>
							  	<input id="numIn" class="numInner" type="number" readonly="readonly" value="0"/>
							  <!-- "+"按钮，点击可增大当前数值 -->
							  <button class="mui-btn addBtnS bt1" type="button">+</button>
						</li>
					</ul>
					<p class="mui-text-right" style="box-sizing: border-box;padding-right: 0.3rem;">每手<span class="numMin">0</span>股</p>
				</div>
				<div class="mui-row select_total">
					<ul>
						<li id="buy" class="mui-col-sm-6 mui-col-xs-6" data-type='0'>
							<div class="mui-col-sm-12 mui-col-xs-12">
								<span >买入</span>
							</div>
						</li>
						<li id="sale" class="mui-col-sm-6 mui-col-xs-6" data-type='1'>
							<div class="mui-col-sm-12 mui-col-xs-12">
								<span>卖出</span>
							</div>
						</li>
					</ul>
				</div>
				<div class="mui-row  money_total money_titles">
					<ul class="order_title">
						<li class="mui-col-sm-3 mui-col-xs-3 deal_name">
							<span>名称</span>
						</li>
						<li class="mui-col-sm-3 mui-col-xs-3">
							<span>持仓量</span>
						</li>
						<li class="mui-col-sm-3 mui-col-xs-3">
							<span>浮动盈亏</span>
						</li>
						<li class="mui-col-sm-3 mui-col-xs-3">
							<span>成本/现价</span>
						</li>
					</ul>
					<div id="day_list" style="box-sizing: border-box;padding-bottom: 50px;"></div>
					<script type='text/template' id="day_temp">
						{%for(var i=0;i< data.length;i++){%}
						<ul class='deal_logo' style='margin-bottom: 10px;border-bottom: 1px solid #1D1D1D;'>
							<li class='mui-col-sm-4 mui-col-xs-4'style='text-align: left;color:#666'>
								{%if(data[i].currency==1){%}
								<img style='height:15px;margin-top: 3px;' src='images/HK_20x15_@3x.png' alt='' class='mui-pull-left'>
								{%}else{%}
								<img style='height:15px;margin-top: 3px;' src='images/US_40_29.png' alt='' class='mui-pull-left'>
								{%}%}
								<span class="stockName">{%=data[i].codeName%}</span><br>
								<span style='margin-left:20px;color:#999;'>{%=data[i].stockCode%}</span>
							</li>
							<li class='mui-col-sm-2 mui-col-xs-2' style='text-align: left;line-height: 1.3rem;color:#ffc938'>{%=data[i].countUsable%}</li>
							<li style='text-align: center' class='mui-col-sm-3 mui-col-xs-3' style='text-align: center;'>
								{%if(Number(data[i].floatFee)>0){%}
								<span style='color:#f94645'>{%=data[i].floatFee%}</span>
								{%}else if(Number(data[i].floatFee)<0){%}
								<span style='color:#77d850'>{%=data[i].floatFee%}</span>
								{%}else{%}
								<span style='color:#999'>{%=data[i].floatFee%}</span>
								{%}%}
								<br>
								{%if(Number(data[i].floatRatio)>0){%}
								<span style='color:#f94645'>{%=data[i].floatRatio%}</span>
								{%}else if(Number(data[i].floatRatio)<0){%}
								<span style='color:#77d850'>{%=data[i].floatRatio%}</span>
								{%}else{%}
								<span style='color:#999'>{%=data[i].floatRatio%}</span>
								{%}%}
							</li>
							<li style='text-align:center;' class='mui-col-sm-3 mui-col-xs-3'>
								<span>{%=data[i].countCost%}</span><br>
								<span style="color:#fff;">{%=data[i].newPrice%}</span>
							</li>
						</ul>
						{%}%}
					</script>
				</div>
			</div>
		</div>
		<div id="tost" class="mui-row guid" style="display:none">
			<ul>
				<li class="mui-col-sm-12 mui-col-xs-12"><span>交易信息确认</span></li>
			</ul>
			<ul>
				<li class="mui-col-sm-5 mui-col-xs-5">
					<span>商品名称</span>
				</li>
				<li id="title" class="mui-col-sm-7 mui-col-xs-7">
					<span></span>
				</li>
				<li class="mui-col-sm-5 mui-col-xs-5">
					<span>商品代码</span>
				</li>
				<li id="title4"  class="mui-col-sm-7 mui-col-xs-7">
					<span></span>
				</li>
				<li class="mui-col-sm-5 mui-col-xs-5">
					<span>商品价格</span>
	
				</li>
				<li id="title1" class="mui-col-sm-7 mui-col-xs-7">
					<span></span>
				</li>
				<li class="mui-col-sm-5 mui-col-xs-5">
					<span>商品数量</span>
				</li>
				<li id="title2" class="mui-col-sm-7 mui-col-xs-7">
					<span></span>
				</li>
				<li class="mui-col-sm-5 mui-col-xs-5">
					<span>交易类型</span>
				</li>
				<li id="title3" class="mui-col-sm-7 mui-col-xs-7">
					<span></span>
				</li>
				<li style="text-align: center;width:100%">
					<button id="btn1">确认</button>	<button id='btn2'>取消</button>
				</li>
			</ul>
		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script src='libs/easymob-webim-sdk/jquery-1.11.1.js'></script>
	<script src='js/mstock.js'></script>
	<script src='js/configs.js'></script>
	<script src='json/all.js'></script>
	<script src='js/temp.js'></script>
	<script src='js/sdeal.js'></script>
	<script>
		mui.init();
		tradeDeal().stockSale();
	</script>
	
</html>